<template>
    <div class="show-pc">
        <div class="works_item">
            <div class="title">我的作品</div>
            <div>
                <div class="selector-wrapper">
                    <div class="selector-container" :style="{ maxWidth: '76vw' }">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>
    <!-- 手机 -->
    <div class="show-wap">

        <div class="works_item-wap">
            <!-- <div class="title-wap" style="color: var( --color-text);">我的作品</div> -->
            <div>
                <div class="selector-wrapper-wap">
                    <div class="selector-container-wap" :style="{ maxWidth: '76vw' }">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item-wap"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" style="padding:0px 10px">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>

</template>

<script setup>
import img_1 from "../../assets/images/local_img/img_1.png"
import img_2 from "../../assets/images/local_img/img_2.png"
import img_3 from "../../assets/images/local_img/img_3.png"
import img_4 from "../../assets/images/local_img/img_4.png"
import img_5 from "../../assets/images/local_img/img_5.png"
import img_6 from "../../assets/images/local_img/img_6.png"
import img_7 from "../../assets/images/local_img/img_7.png"
import img_8 from "../../assets/images/local_img/img_8.png"
import img_9 from "../../assets/images/local_img/img_9.png"
import img_10 from "../../assets/images/local_img/img_10.png"

// 定义接收的props
const props = defineProps({
    userData: {
        type: Object,
        required: true
    },
    config: {
        type: Object,
        default: () => ({})
    }
})
const activeKey = ref('works')
const menuItems = ref([
    { key: 'works', label: '全部', },
    { key: 'notifications', label: 'VI标准', },
    { key: 'following', label: '熊猫IP标准', },
    { key: 'likes', label: '品推标准', },


]);
const handleSelect = (key) => {
    activeKey.value = key
}


const list = ref([{
    imgurl: img_2,
    text: "档期活动物料",
    name: "作家sss"
}, {
    imgurl: img_5,
    text: "图片2",
    name: "作家"
}, {
    imgurl: img_7,
    text: "图片3",
    name: "作家"
}, {
    imgurl: img_8,
    text: "图片4",
    name: "作家"
}, {
    imgurl: img_10,
    text: "图片5",
    name: "作家"
}, {
    imgurl: img_6,
    text: "图片2",
    name: "作家"
}, {
    imgurl: img_9,
    text: "图片3",
    name: "作家"
}, {
    imgurl: img_10,
    text: "图片4",
    name: "作家"
}, {
    imgurl: img_1,
    text: "图片5",
    name: "作家"
}, {
    imgurl: img_2,
    text: "图片2",
    name: "作家"
}, {
    imgurl: img_4,
    text: "图片3",
    name: "作家"
}, {
    imgurl: img_8,
    text: "图片4",
    name: "作家"
}, {
    imgurl: img_3,
    text: "图片5",
    name: "作家"
},
{
    imgurl: img_8,
    text: "图片4",
    name: "作家"
}, {
    imgurl: img_10,
    text: "图片5",
    name: "作家"
}, {
    imgurl: img_6,
    text: "图片2",
    name: "作家"
}, {
    imgurl: img_9,
    text: "图片3",
    name: "作家"
},
])

// 使用props
console.log('收到的用户数据:', props.userData)
console.log('配置信息:', props.config)
</script>

<style lang="less" scoped>
.works_item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px;

    .title {
        color: var(--color-text);
        font-size: var(--text-22);
    }

    .selector-wrapper {

        display: flex;
        justify-content: center;
        align-content: center;


        /* 选择器主体 */
        .selector-container {
            display: flex;

            border-radius: 8px;

            width: 100%;
            max-width: 76vw;
            /* 最大宽度限制 */
            scrollbar-width: none;
            /* 隐藏滚动条（Firefox） */
        }




        .menu-item {

            padding: 0vw 0.52vw;
            /* 响应式内边距 */
            cursor: pointer;
            white-space: nowrap;

            /* 防止内容挤压 */
            font-size: var(--text-16);
            color: #787a7e;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.52vw;
            text-align: center;


        }

        .menu-item.active {

            text-align: center;
            line-height: 1.7vw;
            border-radius: 0.2vw;
            background-color: var(--ba-color-sel);
            color: var(--color-text-3);


        }



        .selector-container::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条（Chrome/Safari） */
        }

        .menu-item:hover {
            // color: #E37178;
            // background-color: #E37178;
        }


    }
}

.works_item-wap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0px;
    border: 1px solid red;

    .title-wap {

        font-size: 18px;
        color: red;
    }


    .selector-wrapper-wap {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 100%;
        overflow-x: auto;
        /* 允许水平滚动 */
        scrollbar-width: none;
        /* 隐藏滚动条（Firefox） */
    }

    .selector-wrapper-wap::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条（Chrome/Safari） */
    }

    .selector-container-wap {
        display: flex;
        border-radius: 8px;
        width: auto;
        /* 改为自动宽度 */
        min-width: 100%;
        /* 确保容器至少和父元素一样宽 */
        padding: 0 10px;
        /* 添加一些内边距 */
        box-sizing: border-box;
        overflow-x: auto;
        /* 允许水平滚动 */
        scrollbar-width: none;
        /* 隐藏滚动条（Firefox） */
    }

    .selector-container-wap::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条（Chrome/Safari） */
    }

    .menu-item-wap {
        padding: 0 10px;
        white-space: nowrap;
        font-size: 16px;
        color: #787a7e;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        line-height: 33px;
        flex-shrink: 0;
        /* 防止菜单项被压缩 */
    }

    .menu-item-wap.active {
        text-align: center;
        line-height: 33px;
        border-radius: 4px;
        background-color: var(--ba-color-sel);
        color: var(--color-text-3);
    }
}
</style>